<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>留言板</title>
  </head>
  <body onload="head()">
    <h1 class="title01">发布留言</h1>
    <div class="message">
      <div>
        用户姓名:
        <input
          type="text"
          onfocus="f(this,'请输入用户名')"
          onblur="f1(this)"
          id="input"
        /><span></span>
      </div>
      <div>
        留言内容:
        <textarea
          id="button"
          cols="30"
          rows="5"
          onfocus="f(this,'请输入留言内容')"
          onblur="f1(this)"
        ></textarea
        ><span></span>
      </div>
      <button onclick="onMessage()">发布留言</button>
      <button id="list">倒序</button>
      <button id="list">正序</button>
    </div>
    <div class="title">
      <h1>留言板</h1>
      <div id="step">一共()楼</div>
    </div>
    <!--tilte-->
    <div id="contents">
      <div class="box" id="box">
        <div class="tit">1楼</div>
        <div class="img"><img src="img/a.jpg" alt="" /></div>
        <div class="main">
          <div>用户姓名:</div>
          <div>留言内容:</div>
        </div>
        <div class="div02">
          <div>
            <a href="javasrcipt:void(0)" onclick="del(this)">删除</a> |
            <a href="javasrcipt:void(0)" onclick="add(this,0)">点赞()</a>
          </div>
          <div>发布时间:2020年3月14日</div>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  //判断输入用户名onfocus效果，获取焦点
  function f(obj, text) {
    obj.nextSibling.innerHTML = text;
    obj.nextSibling.className = "black";
  }
  //onblur效果，失去焦点
  function f1(str) {
    str.nextSibling.innerHTML = "";
  }

  //删除留言
  function del(obj) {
    var p = obj.parentNode.parentNode.parentNode;
    var contents = document.getElementById("contents");
    contents.removeChild(p);
  }
  //点赞增加
  var t = 0;
  function add(obj, t) {
    t++;
    var div = obj.parentNode;
    div.innerHTML =
      '<a href="javasrcipt:void(0)" οnclick="del(this)">删除</a> |' +
      '<a href="javasrcipt:void(0)" οnclick="add(this,' +
      t +
      ')">点赞(' +
      t +
      ")</a>";
  }

  //提交留言
  var i = 0;
  var j = 0;

  function onMessage() {
    var input = document.getElementById("input");
    var button = document.getElementById("button");
    if (input.value == "") {
      input.nextSibling.innerHTML = "*必须填写用户名";
      input.nextSibling.className = "red";
    } else if (button.value == "") {
      button.nextSibling.innerHTML = "*必须填留言内容";
      button.nextSibling.className = "red";
    } else {
      i++;
      j++;
      var box = document.getElementById("box");
      var div = box.cloneNode(true); //克隆盒子
      var child = div.getElementsByTagName("div");
      div.id = "box" + i; //因为id的命名是唯一的，所以这种方法来改变每次克隆出来的盒子的id
      div.style.display = "block";
      child[0].innerHTML = i + "楼";
      child[3].innerHTML = "用户姓名:" + input.value;
      child[4].innerHTML = "留言内容:" + button.value;
      child[7].innerHTML = "发布时间" + onTime(); //获取动态时间
      var contents = document.getElementById("contents");
      contents.appendChild(div); //在contents中插入克隆的盒子
      var step = document.getElementById("step");
      step.innerHTML = "一共有(" + j + ")楼"; //总楼层数增加
      input.value = "";
      button.value = "";
    }
  }

  //发布时间
  function onTime() {
    var date = new Date();
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var r = date.getDate();
    var d = date.getDay();
    if (d == 0) {
      d = "日";
    } else if (d == 1) {
      d = "一";
    } else if (d == 2) {
      d = "二";
    } else if (d == 3) {
      d = "三";
    } else if (d == 4) {
      d = "四";
    } else if (d == 5) {
      d = "五";
    } else if (d == 6) {
      d = "六";
    }
    var h = date.getHours();
    var f = date.getMinutes();
    var s = date.getSeconds();
    return (
      y +
      "年" +
      m +
      "月" +
      r +
      "日" +
      "星期" +
      d +
      "," +
      h +
      "时" +
      f +
      "分" +
      s +
      "秒"
    );
  }

  var arr = [];
</script>
